<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>快乐貂-专业的论坛 登陆页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/page/login.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/iview/iview.min.css}">
</head>
<body>
		<div id="loginPageForm" class="container layout">
	        <Header class="">
	        	 <div class= "header-nav-content">
		        	<div class="login-logo">
		        		<img alt="快乐貂LOGO" th:src="@{/images/kld-logo.gif}"/>
		        	</div>
	        	</div>
	        </Header>
	        <Content class="loginContent" >
	        	<div class= "header-nav-content ">
		        	<Row>
				        <i-col span="14">
				        	<div class="div-center login-content-left-img">
				        		<img alt="快乐骚" th:src="@{/images/kld-sao.png}" style="width:399px;">
				        	</div>
				        </i-col>
				        <i-col span="10">
				        	<div class="loginForm div-center">
			        			<div class="loginFromModel">
			        				<div class="login-title">
			        					欢迎登陆
			        				</div>
			        				<div class="login-img">
			        					<img v-show="focusUser" alt="快乐貂站长守护" th:src="@{/images/kld-user.jpg}" style="width:380px;height:200px;">
			        					<img v-show="!focusUser" alt="快乐貂LOGO" th:src="@{/images/kld-password.png}" style="width:380px;height:200px;"/>
			        				</div>
			        				<div class="login-content">
			        					<div>
									        <i-input prefix="ios-contact" placeholder="输入你的用户名"  @input="setFocusImg(true)"/>
									    </div>
									    <div>
									        <i-input prefix="ios-contact" placeholder="输入你的密码"   @input="setFocusImg(false)"/>
									    </div>
			        				</div>
			        				<div class="login-button-panel">
			        					<i-button type="submit" long @click="login()">登陆</i-button>
			        				</div>
			        			</div>
			        		</div>
				        </i-col>
				    </Row>
	        	</div>
	        </Content>
	        <Footer class="loginFooter">
	        	
	        </Footer>
		</div>
	<script type="text/javascript" th:src="@{/plugin/vue/vue.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugin/iview/iview.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery/jquery-3.4.1.js}"></script>
	<script type="text/javascript" th:src="@{/js/util.js}"></script>
	<script type="text/javascript" th:src="@{/js/page/login.js}"></script>
	
	<script type="text/javascript">
		new Vue({
			el:"#loginPageForm",
			data:{
				focusUser:true,
				username:"",
				password:""
			},
			methods:{
				setFocusImg(flag){
					console.log(flag)
					this.focusUser=flag
				},
				login(){
					diaoer.util.httpPost("/login",{username:this.username,password:this.password}).done(res=>{
						console.log(res)
					})
				}
			}
		})
	</script>
</body>
</html>
